<template>
  <div class="app-container">
    <!-- 条件查询 v-permission="'menu:search'"  -->
    <el-card class="box-card">
      <el-form :inline="true" :model="query" size="mini">
        <el-form-item label="目录名称">
          <el-input v-model.trim="query.name" />
        </el-form-item>
        <el-form-item>
          <!-- @click="fetchData" 直接调用方法，因没有分页，query 对象和方法已双向绑定 -->
          <el-button v-permission="'message:search'" icon="el-icon-search" type="primary" @click="fetchData">查询</el-button>
          <el-button v-permission="'message:search'" icon="el-icon-refresh" @click="reload">重置</el-button>
          <!--  方法传递 0，0 为一级目录，这里新增的是一级菜单 -->
          <el-button v-permission="'menu:add'" icon="el-icon-circle-plus-outline" type="success" @click="handleAdd(0)">新增目录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 渲染树状数据时,必须指定 row-key="id" ,list集合中的 id属性,
         其中数据要包含 children 才会被渲染为树状 -->
    <el-table
      row-key="id"
      :data="list"
      stripe
      border
      style="width: 100%"
    >
      <el-table-column align="center" type="index" label="序号" width="60" />
      <el-table-column align="center" prop="name" label="名称" />
      <el-table-column align="center" prop="url" label="请求地址" />
      <el-table-column align="center" prop="code" label="权限标识" />
      <el-table-column align="center" prop="type" label="类型">
        <template slot-scope="scope">
          <!-- 1目录，2菜单，3按钮 -->
          <span v-if="scope.row.type == 1">目录</span>
          <span v-if="scope.row.type == 2">菜单</span>
          <span v-if="scope.row.type == 3">按钮</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="icon" label="图标">
        <template slot-scope="scope">
          <i :class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="remark" label="备注" />
      <el-table-column align="center" prop="sort" label="排序" />
      <el-table-column align="center" label="操作" width="260">
        <template slot-scope="scope">
          <!-- 新增当前记录的子菜单，传当前菜单 id -->
          <el-button v-permission="'menu:add'" type="primary" size="mini" @click="handleAdd(scope.row.id)">新增子菜单</el-button>
          <el-button v-permission="'menu:edit'" type="success" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button v-permission="'menu:delete'" type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 子组件: 新增或编辑 -->
    <edit
      :title="edit.title"
      :visible="edit.visible"
      :form-data="edit.formData"
      :remote-close="remoteClose"
    />
  </div>
</template>
<script>
import api from '@/api/menu'
import Edit from './edit'

export default {
  name: 'Menu',
  components: {
    Edit
  },
  data() {
    return {
      list: [],
      query: {},
      // 新增或编辑数据对象
      edit: {
        title: '',
        visible: false,
        formData: {}
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取列表数据
    async fetchData() {
      const { data } = await api.getList(this.query)
      this.list = data.menus
    },
    // 新增（新增一级目录或新增子菜单共用方法，看传来的id值。
    // 传来的 id 值都作为父菜单 id。
    // 新增目录，传来id值为0，新增子菜单，传来值为当前行菜单id )
    handleAdd(id) {
      this.edit.formData.parentId = id
      this.edit.title = '新增'
      this.edit.visible = true
    },
    // 关闭弹窗
    remoteClose() {
      this.edit.formData = {}
      this.edit.visible = false
      this.fetchData()
    },
    // 重置
    reload() {
      this.query = {}
      this.fetchData()
    },
    // 打开编辑窗口-根据id查询详情
    async handleEdit(id) {
      const response = await api.getById(id)
      this.edit.formData = response.data.menu
      this.edit.visible = true
      this.edit.title = '编辑菜单'
    },
    // 删除
    handleDelete(id) {
      this.$confirm('确定要删除这条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送请求
        api.deleteById(id).then(response => {
          if (response.code === 200) {
            this.fetchData()
            this.$message.success(response.message)
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style scoped>
</style>
